<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      treeData: {
        item: {id: null},
        clickItem: {
          id: null
        },
        detailHidden: true,
        filterText: '',
        list: [],
        defaultProps: {
          children: 'children',
          label: 'nodeName'
        }
      },
      tableData: [],
    };
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    treeClick: function (item) {
      this.treeData.detailHidden = true
      this.treeData.clickItem = item.node
    },
    treeNodeAddUpdate: function (item, isDel) {
      if (isDel) {
        this.$axios({url:'/ems/client/base/diagram/delete',data: {content: item.id}}).then((content) => {
          if (content) {
            this.$message("删除成功")
            this.fetchData()
          }
        });
        return
      }
      this.treeData.detailHidden = false
      this.treeData.item = item
    },
    fetchData: function () {
      this.treeData.detailHidden = true
      const data = {content: {excludeTypes: ['INSTITUTE', 'BUILDING', 'DEPARTMENT', 'METER', 'POINT', 'GATEWAY']}}
      this.$axios({url:"/ems/client/energy/search/circuit/diagram/tree", data: data}).then((content) => {
        this.treeData.list = content.list
      })
    },
    treeFilterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
  components: {
    addDiagramNode: () => import("@/components/dev-ops-mgr/modules/addDiagramNode.vue"),
    diagramRelate: () => import("@/components/dev-ops-mgr/modules/DiagramRelate.vue")
  }
};
</script>

<template>
  <div>
    <el-row id="tree-area">
      <el-col :span="10">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="treeData.filterText">
        </el-input>
        <el-button type="primary" size="mini" @click="treeNodeAddUpdate({})" style="margin-top: 15px;"> 添加节点</el-button>
        <el-tree
            class="filter-tree"
            :data="treeData.list"
            :props="treeData.defaultProps"
            :filter-node-method="treeFilterNode"
            ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span style="font-size: 15px;border-radius: 3px;padding: 7px 15px;" @click="treeClick(data)"><i class="el-icon-c-scale-to-original"/>
                &nbsp;{{ node.label }}<i v-if="data.node.virtual==='Y'" style="color: red">(虚拟)</i>
              </span>
              <span style="color: rgb(102, 177, 255)">
                <i class="el-icon-circle-plus" @click="treeNodeAddUpdate({parentId: data.node.id})"/> &nbsp;
                <i class="el-icon-setting" @click="treeNodeAddUpdate(data.node)"/> &nbsp;
               <i class="el-icon-remove" @click="treeNodeAddUpdate(data.node, true)"/>
              </span>
            </span>
        </el-tree>
      </el-col>
      <el-col :span="14" v-if="!treeData.detailHidden">
        <addDiagramNode :treeData = "treeData" :fetchTreeData="fetchData" :selectedIdUpdate="treeData.item.id"/>
      </el-col>
      <el-col :span="14" v-if="treeData.detailHidden">
        <diagramRelate :node-id="treeData.clickItem.id" :nodeItem="treeData.clickItem"/>
      </el-col>
    </el-row>
  </div>
</template>

<style>
#tree-area .el-tree {
  padding: 15px 0;
}
#tree-area .el-tree-node {
  margin: 10px 0;
}
</style>
